<template>
	<div class="common-layout">
		<el-container>
			<el-header>
				<h3>后台管理-导航栏位置</h3>
				<el-dropdown>
					<label class="el-dropdown-link"><el-avatar></el-avatar>管理员</label>
					<template #dropdown>
						<el-dropdown-menu>
							<el-dropdown-item @click="this.$router.push('/')">退出登录</el-dropdown-item>
						</el-dropdown-menu>
					</template>
				</el-dropdown>
			</el-header>
			<el-container>
				<el-aside>
					<el-menu :router="true">
						<el-menu-item index="/admin/type">类型管理</el-menu-item>
						<el-menu-item index="/admin/books">书本管理</el-menu-item>
						<el-menu-item index="/admin/banner">热点管理</el-menu-item>
						<el-menu-item index="/admin/order">订单发货</el-menu-item>
						<el-menu-item index="/admin/list">用户列表</el-menu-item>
						<el-menu-item index="/admin/add">管理员添加</el-menu-item>
					</el-menu>
				</el-aside>
				<el-main>
					<router-view></router-view>
				</el-main>
			</el-container>
		</el-container>
	</div>
</template>

<script>
	
	export default{
		name:'Admin',
	}
</script>

<style scoped>
	.el-header{
		display: flex;
		justify-content: space-between;
		align-items: center;
		background: #545c64;
		color: white;
		width: 100%;
		z-index: 99;
		position: fixed;
		top: 0;
		left: 0;
	}
	.el-header h3{
		padding-left: 10px;
		font-size: 20px;
		font-weight: bold;
		line-height: 60px;
	}
	.el-container .el-container{
		padding-top: 60px;
	}
	.el-main{
		margin: 0;
		padding: 0;
		border-left: 1px solid gainsboro;
	}
	.el-dropdown label{
		color: white;
	}
</style>
